<template>
    <div class="user_location">
        <div  v-if="$store.state.pk.status === 'playing' && $store.state.user.id == $store.state.pk.a_id">初始位置:左下角</div>
        <div  v-if="$store.state.pk.status === 'playing' && $store.state.user.id == $store.state.pk.b_id">初始位置:右上角</div>
    </div>
    <match-ground v-if="$store.state.pk.status === 'matching'"></match-ground>
    <play-ground  v-if="$store.state.pk.status === 'playing'"></play-ground>
    <result-board v-if="$store.state.pk.loser !== 'none'"></result-board>
</template>
<script>
    import PlayGround from  "@/components/PlayGround.vue"
    import MatchGround from '@/components/MatchGround'
    import ResultBoard from '@/components/ResultBoard'
    import {onMounted,onUnmounted} from 'vue'
    import {useStore} from 'vuex'
    export default{
        components:{
            PlayGround,
            MatchGround,
            ResultBoard
        },
        setup() {
            const store = useStore();
            store.commit('UpdateLoser',"none");
            const socketUrl = `wss://xwjsnakebot.com.cn/websocket/${store.state.user.token}/`;
            let socket = null; 
            onMounted(() => {
                socket = new WebSocket(socketUrl);
                store.commit('UpdateSocket',socket)
                socket.onopen = () => {
                    console.log('已建立连接！');
                }
                socket.onmessage = message => {//接收服务端传过来的消息
                    const data = JSON.parse(message.data)
                    if(data.event === 'start-matching'){//匹配成功
                        store.commit('UpdateOpponent',{
                            username:data.opponent_username,
                            photo:data.opponent_photo
                        }) 
                        setTimeout(() => {
                            store.commit('UpdateStatus',"playing")
                        },200)
                        store.commit('UpdateGameMap',data.game)
                    }else if(data.event === 'move'){
                        const game = store.state.pk.gameObject;
                        const [snake0,snake1] = game.snakes;
                        snake0.set_direction(data.a_direction);
                        snake1.set_direction(data.b_direction);
                    }else if(data.event === 'result'){
                        const game = store.state.pk.gameObject;
                        const [snake0,snake1] = game.snakes;
                        if(data.loser === 'all' || data.loser === 'A'){
                            snake0.status = 'die';
                        }
                        if(data.loser === 'all' || data.loser === 'B'){
                            snake1.status = 'die';
                        }
                        store.commit("UpdateLoser",data.loser);
                    }
                }
                socket.onclose = () => {
                    console.log('已断开连接')
                }
            });
            onUnmounted(() => {
                socket.close();
                store.commit('UpdateOpponent',{
                    username:"我的对手",
                    photo:'https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png'
                }) 
                store.commit('UpdateStatus','matching')
            })
            return {
            }
        },
    }
</script>

<style scoped>
.user_location{
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    height: 50px;
}
@media screen and (max-width: 550px) and (min-width: 300px) {
    .user_location{
        text-align: center;
        color: rgb(12, 190, 235);
        font-size: 25px;
        font-weight: bold;
        height: 30px;
    }   
}
</style>